<template>
  <div>
    <h1>vuex练习</h1>
    <h1>state使用：{{ $store.state.count }}</h1>
    <h1>{{ x }}</h1>
    <h1>getters使用：{{ $store.getters.douCount }}</h1>

    <button @click="changeData">触发mutations</button>
    <button @click="changeAction">触发action</button>
    <hr />
    <good-son
      @sendmsg="getData"
      :username="fuser"
      :age="8"
      class="cc"
      id="kk"
      :nba="laker"
    >
      <template #footer>
        <h1>好大哥啊</h1>
      </template>
    </good-son>
    <good-brother></good-brother>
  </div>
</template>
<script>
import { ref, computed } from 'vue'
import { useStore, mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import goodSon from './GoodSon.vue'
import goodBrother from './GoodBrother.vue'
// useStore 是一个函数 获取 vuex操作对象
export default {
  components: { goodSon, goodBrother },
  // methods: {
  //   ...mapActions(["countAction"]),
  //   ...mapMutations("changeCount")
  // },
  // computed: {
  //   ...mapState(["count"]),
  //   ...mapGetters("douCount")
  // },
  setup () {
    let x = ref(0)
    let fuser = ref('赵云')
    let laker = '蔡徐坤'
    let store = useStore()
    x.value = store.state.count //赋值使用一次state数据
    let changeData = () => {
      // mutations触发
      store.commit('changeCount', 5)
    }
    //

    let changeAction = () => {
      // actions触发
      store.dispatch('countAction', 10)
    }
    // 父组件的函数接受数据
    let getData = a => {
      console.log(a)
    }
    return {
      x,
      changeData,
      changeAction,
      fuser,
      getData,
      laker
      // douCounts
    }
  }
}
</script>
<style lang="less"></style>
